<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css"
    type="text/css">
  <style>
    .map {
      height: 400px;
      width: 100%;
    }

    body,
    html,
    #map {
      /*:root等同html*/
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
  <title>OpenLayers example</title>
  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
</head>

<body>
  <h2>My Map</h2>
  <div id="map" class="map"></div>
  <script type="text/javascript">
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [116.61699794, 39.89564188],
        zoom: 16
      })
    });

    var gsonline = turf.lineString([
      [116.59879595, 39.89664171],
      [116.5986717, 39.89666261],
      [116.59845011, 39.8967033],
      [116.59822853, 39.89674739],
      [116.59801115, 39.8967937],
      [116.59780068, 39.89684064],
      [116.59763333, 39.89687921],
      [116.59731113, 39.89695625],
      [116.59713508, 39.89699872],
      [116.59673796, 39.89709448],
      [116.59635517, 39.89718667],
      [116.59543407, 39.89740892],
      [116.59427369, 39.89768908],
      [116.59316579, 39.89795618],
      [116.59204817, 39.8982258],
      [116.59092802, 39.89849675],
      [116.58923804, 39.89890439],
      [116.58856897, 39.89906471],
      [116.58823185, 39.89914184],
      [116.58782895, 39.89922778],
      [116.58744885, 39.89930006],
      [116.58678085, 39.89940347],
      [116.5863369, 39.89945522],
      [116.5857559, 39.89950292],
      [116.58519192, 39.89952749],
      [116.58462346, 39.89953284],
      [116.5840741, 39.89952423],
      [116.58331796, 39.8995008],
      [116.58104876, 39.89942425],
      [116.58043856, 39.89940805],
      [116.5800868, 39.89940463],
      [116.57972216, 39.8994081],
      [116.57942718, 39.89941664],
      [116.57908413, 39.8994336],
      [116.57870473, 39.89945937],
      [116.57866246, 39.89946294]
      /*  [116.61322442, 39.89545417],//大弧线
       [116.61357355, 39.895436],
       [116.61389777, 39.8954199],
       [116.61422509, 39.89540458],
       [116.61455151, 39.89539436],
       [116.61487034, 39.89539065],
       [116.61516373, 39.89539519],
       [116.61546184, 39.89540924],
       [116.61575114, 39.89543238],
       [116.61604035, 39.89546508],
       [116.61639025, 39.89551685],
       [116.61670851, 39.89557655],
       [116.61699794, 39.89564188],
       [116.61728927, 39.8957181],
       [116.6175743, 39.8958032],
       [116.61789369, 39.89591228],
       [116.61816692, 39.89601736],
       [116.61844676, 39.89613728],
       [116.61870176, 39.89625811],
       [116.61894966, 39.89638745],
       [116.61922071, 39.89654335],
       [116.61947022, 39.89670024],
       [116.61962352, 39.89680959] */
      /*   [116.62422254, 39.90157596],//斜直线
        [116.62449521, 39.90186347],
        [116.62477666, 39.90215777],
        [116.62492973, 39.9023179],
        [116.6252082, 39.9026153],
        [116.62541611, 39.90283454],
        [116.62557109, 39.90299992],
        [116.62580951, 39.90325537],
        [116.62603173, 39.90349177],
        [116.62624441, 39.90371721],
        [116.62648237, 39.90396696],
        [116.62667742, 39.90417381],
        [116.62691872, 39.90442928],
        [116.62715144, 39.90467189],
        [116.62735793, 39.90489447],
        [116.62761641, 39.90516759],
        [116.62779573, 39.90535538],
        [116.62800747, 39.90557798],
        [116.6281763, 39.90575577],
        [116.62843002, 39.90602602],
        [116.62866323, 39.90627436] */

    ])
    const fline = (new ol.format.GeoJSON()).readFeature(gsonline)
    const endindex = gsonline.geometry.coordinates.length - 1;

    // 线的起点的左边
    var lsl = turf.transformRotate(gsonline, -90, {
      pivot: gsonline.geometry.coordinates[0]
    });
    const flsl = (new ol.format.GeoJSON()).readFeature(lsl)

    // 线的起点的右边
    var lsr = turf.transformRotate(gsonline, 90, {
      pivot: gsonline.geometry.coordinates[0]
    });
    const flsr = (new ol.format.GeoJSON()).readFeature(lsr)

    // 线的终点的左边
    var lel = turf.transformRotate(gsonline, 90, {
      pivot: gsonline.geometry.coordinates[endindex]
    });
    const flel = (new ol.format.GeoJSON()).readFeature(lel)

    // 线的终点的右边
    var ler = turf.transformRotate(gsonline, -90, {
      pivot: gsonline.geometry.coordinates[endindex]
    });
    const fler = (new ol.format.GeoJSON()).readFeature(ler)

    flsl.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 4,
        color: 'blue'
      })
    }))
    flsr.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 4,
        color: 'lightblue'
      })
    }))
    flel.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 4,
        color: 'green'
      })
    }))
    fler.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 4,
        color: 'lightgreen'
      })
    }))

    var buffered = turf.buffer(gsonline, 100, {
      units: 'meters'
    });
    const fbuffered = (new ol.format.GeoJSON()).readFeature(buffered)

    // 构建buffer为点featureCollection
    var bufferedtoline = turf.polygonToLine(buffered);
    let pointsarr = [];
    bufferedtoline.geometry.coordinates.forEach((coord) => {
      const point = turf.point(coord);
      pointsarr.push(point)
    })
    var points = turf.featureCollection(pointsarr);

    // 遍历找出4个点(垂线与buffer相交的点)
    const four_gline = [lel, lsl, lsr, ler]
    let intersectpointarr = [];
    four_gline.forEach((i) => {
      var intersects = turf.lineIntersect(i, buffered);
      const intersectpoint = intersects.features[0];
      intersectpointarr.push(intersectpoint);
    })

    let four_index = [];
    intersectpointarr.forEach((i) => {
      var nearest = turf.nearestPoint(i, points);
      four_index.push(nearest.properties.featureIndex);
      // console.log(nearest.geometry.coordinates)
    })

    console.log(four_index);
    const splicetop = four_index[3] - four_index[0]
    const splicebtm = four_index[1] - four_index[2]
    const bufferedcoordarry = buffered.geometry.coordinates[0]
    console.log(bufferedcoordarry);
    bufferedcoordarry.splice(four_index[0] + 1, splicetop - 1)
    console.log(bufferedcoordarry);
    bufferedcoordarry.splice(four_index[2] + 2 - splicetop, splicebtm - 1)
    console.log(bufferedcoordarry);
    const fbuffered2 = (new ol.format.GeoJSON()).readFeature(buffered)


    // var gl = turf.polygon([
    //     [

    //         [116.62793434119509, 39.906677132190524], //54左上角
    //         [116.62349613555897, 39.90198139240297], //172左下角
    //         [116.62494894444106, 39.90117052519812], //140右下角
    //         [116.62939211880494, 39.905871585441524], //86右上角
    //         [116.62793434119509, 39.906677132190524]
    //     ]
    // ])
    // const fl = (new ol.format.GeoJSON()).readFeature(gl)


    //实例化一个矢量图层Vector作为绘制层
    var source = new ol.source.Vector({
      features: [fline, /* flsl, flsr, flel, fler, fbuffered,  */ fbuffered2]
    });
    //创建一个图层
    var vector = new ol.layer.Vector({
      source: source
    });
    //将绘制层添加到地图容器中
    map.addLayer(vector);
  </script>
</body>

</html>